import { Component } from 'react'
import { formatTime } from '../utils/index'
class CommentList extends Component {
  render () {
    return (<div className="comment-list">
      {this.props.list.map((item, index, array) => {
        return (<div className="list-item" key={item.id}>
          <div className="user-face">
            <img className="user-head" src={require('../images' + item.imgsrc)} alt="" />
          </div>
          <div className="comment">
            <div className="user">{item.author}</div>
            <p className="text">{item.comment}</p>
            <div className="info">
              <span className="time">{formatTime(item.time)}</span>
              <span onClick={() => {
                this.props.changeAttitude(
                  item.id,
                  item.attitude === 1 ? 0 : 1
                )
              }}
                className={item.attitude === 1 ? 'like liked' : 'like'}>
                <i className="icon" />
              </span>
              <span onClick={() =>
                this.props.changeAttitude(
                  item.id,
                  item.attitude === -1 ? 0 : -1
                )
              }
                className={item.attitude === -1 ? 'hate hated' : 'hate'}>
                <i className="icon" />
              </span>
              <span className="reply btn-hover" onClick={() => { this.props.del(item.id) }}>删除</span>
            </div>
          </div>
        </div>)
      })}
    </div>)
  }
}
export default CommentList
